/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { Image } from '@tarojs/components'
import { AtActionSheet, AtActionSheetItem } from "taro-ui"

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast} from '../../../library/func';
import Icon from '../../../project/style/icon';
import Http from '../../../project/func/http/http';
import Util from '../../../project/func/util';



// 引用组件
// import { Logoline, Listunitone, Mfooter, Listunittwo} from '../../preset'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Listunitone extends Component {

	constructor(props) {
		super(props);
		/**
		 * state
		 */
		this.state = {
            // 获取屏幕高度
            scrollHeight: wx.getSystemInfoSync().windowHeight,
            show: false,
		}
    }

    componentDidMount(){

    }
    
    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	
    // onRedirect
    onRedirect(url){
        wx.redirectTo({
            url: url
        })
    }	

    // onNavigate
    onNavigate(url){
        wx.navigateTo({
            url: url
        })
    }

    //onNavigateBack
    onNavigateBack(num=1){
        wx.navigateBack({
            delta: num
        })
    }




    // 气泡显隐
    show = ()=> {
        this.setState({
			show: !this.state.show
		})
    }
    // 点击取消按钮
    onCancel = ()=> {
        this.setState({
            show: false
        })
    }
    // 点击遮罩层
    onClose = ()=> {
        this.setState({
            show: false
        })
    }
    
    // 点击置顶
    top = ()=> {
        this.props.onTob();
        this.setState({
            show:false
        })
        console.log('置顶')
    }

	/**
	 * 渲染
	 */
	render() {
    
		// 渲染
		return (
			<CColumn bg='#fff' mb='10' pa='10'>
                <CBetween>
                    { this.props.data.is_top ? 
                        <CHand y='center'><CSvg icon={Icon.maketop} color="#d66352" w='18' h='18'></CSvg><CHand size='13' color='#d66352' ml='8'>置顶</CHand></CHand>
                        :
                        <CHand y='center'></CHand>
                    }

                    <CHand rel>
                        {
                            this.props.is_master ?
                            <CSvg color="#999" icon={Icon.down} w='18' h='18' onClick={this.show}></CSvg>
                            :
                            <CHand></CHand>
                        }
                        {/* 气泡 */}
                        <AtActionSheet isOpened={this.state.show} cancelText='取消' onCancel={this.onCancel} onClose={this.onClose}>
                            <AtActionSheetItem onClick={this.top}>置顶</AtActionSheetItem>
                        </AtActionSheet>
                    </CHand>
                </CBetween>
                <CLine mt='10' onClick={ this.onNavigate.bind(this, this.props.shareurl) } rel>
                    <Image src={ this.props.data.object.set_cover } style='width:100%; height:300rpx;'/>

                    {/* 播放视频的按钮 */}
                    {this.props.is_video == true && <CSvg icon={Icon.videothree} w='50' h='50' abs top='45' left='160' color='#5d5d5d'></CSvg>}
                </CLine>
                <CLine my='14'>
                    <CHand color='#8c8c8c' size='15'>{ this.props.data.set_title }</CHand>
                </CLine>
                <CLine>
                    <CBetween>
                        <CHand><CHand size='13' color='#a6a6a6'>{ Util.formatTime(this.props.data.created,'Y-M-D') }</CHand></CHand>
                        <CHand>
                            <CItemX pr='20' onClick={ this.props.onGoodClick }>
                                <CSvg icon={Icon.good} w='20' h='20'></CSvg>
                                <CHand mt="3" size='12' color='#7d7d7d'>{ this.props.data.count_like }</CHand>
                            </CItemX>

                            <button plain style="border:none" open-type="share" data-title={ this.props.data.set_title } data-path={ this.props.shareurl } data-imageUrl={ this.props.data.object.set_cover }  >
                                <CSvg icon={Icon.share} w='20' h='20'></CSvg>
                            </button>

                        </CHand>
                    </CBetween>
                </CLine>
			</CColumn>
		);
	}
};